<template>
	<view class="mappage">
		<!-- #ifdef MP-WEIXIN -->
		<head-nav title="地图" :showMenu="false"></head-nav>
		<!-- #endif -->
		<map :longitude="longitude" :latitude="latitude" :scale="scale" :style="{height:height}" :markers="covers"
		 show-location id="qqmap" :polyline="polyline" @labeltap="labeltap"></map>

		<view class="searchBox shadow-blur">
			<text class="iconfont icon-fangdajing"></text>
			<input v-model="userIpnut" @confirm="startSearch()" @input="inputing()" placeholder="你要去哪？" />
			<text class="iconfont icon-guanbi1" v-show='userIpnut' @tap="clearIput()"></text>
			<view class="tipBox radius shadow-blur" v-if="userIpnut && Suggestions.length">
				<view class="eachsuggest" v-for="(n,i) in Suggestions" :key="n.id" @tap="targetarea(n)">
					<text class="text-cut text-orange" style="max-width: 170rpx;">{{n.title}}</text>
					<text class="text-cut text-gray" style="max-width: 450rpx;">{{n.address}}</text>
				</view>
			</view>
		</view>

		<view class="backtoorigin sd" @tap="backtoorigin">
			<image src="../../static/origin.png"></image>
		</view>



	</view>
</template>

<script>
	import headNav from '../../components/headNav/headNav.vue'
	const qqmap = require('../../common/qqmapsdk.js')
	export default {
		components: {
			headNav
		},
		watch: {
			'covers': {
				deep: true,
				handler(n) {}
			},
			'polyline': {
				deep: true,
				handler(n) {}
			}
		},
		data() {
			return {
				longitude: undefined,
				latitude: undefined,
				scale: 20, //默认为3-20
				height: undefined,
				covers: [],
				polyline: [],
				userIpnut: undefined,
				Suggestions: []
			}
		},
		methods: {
			labeltap(e) {
				uni.openLocation({
					latitude: this.covers[1].latitude,
					longitude: this.covers[1].longitude,
					name: this.covers[1].callout.content
				})
			},
			setpolyline(e) {
				this.polyline.push({
					points: [{
						latitude: this.latitude,
						longitude: this.longitude
					}, {
						latitude: e.location.lat,
						longitude: e.location.lng
					}],
					color: "#31c27c",
					width: 10,
					arrowLine: true,
					borderWidth: 2
				})
			},
			settargetcover(e, e2) {
				this.covers.push({
					// #ifdef MP-WEIXIN
					id: 20,
					// #endif				
					latitude: e.location.lat,
					longitude: e.location.lng,
					callout: {
						content: e.title,
						display: 'ALWAYS',
						padding: 5,
						bgColor: 'black',
						color: 'white',
						borderRadius: '5'
					},
					// #ifdef MP-WEIXIN
					label: {
						content: '距您 ' + (e2.result.elements[0].distance / 1000).toFixed(2) + ' KM\n点击开始导航',
						bgColor: 'black',
						color: 'white',
						padding: 5,
						borderRadius: '5'
					}
					// #endif
				})
			},
			targetarea(e) {
				console.log('我是目的地信息：', e)
				this.clearIput()
				uni.showLoading({
					title: '正在为你规划路线'
				})
				this.qqmapsdk.calculateDistance({
					from: {
						latitude: this.latitude,
						longitude: this.longitude
					}, //若为空默认当前地址
					to: [{
						latitude: e.location.lat,
						longitude: e.location.lng
					}],
					success: (e2) => {
						uni.hideLoading()
						console.log('我是距离信息', e2)
						this.polyline.length = this.polyline.length == 1 ? 0 : 0
						this.setpolyline(e)
						if (this.covers.length == 2) {
							this.covers.length = 1
							this.settargetcover(e, e2)
						} else {
							this.settargetcover(e, e2)
						}
						this.MapContext.includePoints({
							points: this.covers
						})
						// #ifdef H5
						uni.openLocation({
							latitude: this.covers[1].latitude,
							longitude: this.covers[1].longitude,
							name: this.covers[1].callout.content
						})
						// #endif						
					}
				})
			},
			backtoorigin() {
				this.MapContext.moveToLocation({
					latitude: this.latitude,
					longitude: this.longitude,
				})
			},
			inputing() {
				this.qqmapsdk.getSuggestion({
					keyword: this.userIpnut,
					success: (e) => {
						console.log(e.data[0])
						this.Suggestions = e.data
					}
				})
			},
			startSearch() {

			},
			clearIput() {
				this.userIpnut = ''
			}
		},
		onReady() {
			this.MapContext = uni.createMapContext('qqmap', this)
		},
		onLoad() {
			//H5需要配置腾讯地图key之后使用sdk  
			//H5定位需要https以后才能完全准确，开发环境下有偏差(各有不同)

			// #ifdef H5
			const mobileInfo = uni.getSystemInfoSync()
			this.height = mobileInfo.windowHeight + 'px'
			// #endif

			// #ifdef MP-WEIXIN
			let h = uni.getMenuButtonBoundingClientRect().bottom * 1.2
			const mobileInfo = uni.getSystemInfoSync()
			this.height = mobileInfo.screenHeight - h +
				mobileInfo.safeAreaInsets.bottom + 'px' //tabbar高度			
			// #endif

			this.qqmapsdk = new qqmap({
				key: '5FFBZ-OFKRU-IEZVW-4Y2Q6-ULGRH-KAFE4'
			})

			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				isHighAccuracy: true,
				success: (res) => {
					this.latitude = res.latitude * 1
					this.longitude = res.longitude * 1
					this.qqmapsdk.reverseGeocoder({
						location: {
							latitude: this.latitude,
							longitude: this.longitude
						},
						success: (e) => {
							this.address = e.result.formatted_addresses.recommend
							this.covers.push({
								latitude: this.latitude,
								longitude: this.longitude,
								callout: {
									content: this.address,
									display: 'ALWAYS',
									padding: 5,
									bgColor: 'black',
									color: 'white',
									borderRadius: '5'
								}
							})
						},
						fail: (error) => {
							console.log(error)
						}
					})
				}
			})
		}
	}
</script>

<style lang="scss">
	.mappage {
		position: relative;

		map {
			width: 100vw;
		}

		.searchBox {
			position: fixed;
			left: 5%;

			/* #ifdef H5 */
			top: 50rpx;
			/* #endif */

			/* #ifdef MP-WEIXIN */
			top: 100px;
			/* #endif */

			width: 90%;
			height: 70rpx;
			margin: auto;
			background: #ffffff;
			border-radius: 15rpx;
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 26rpx;
				margin: 0 28rpx;
			}

			input {
				font-size: 28rpx;
				flex: 1;
			}

			.tipBox {
				position: absolute;
				width: 98%;
				max-height: 700rpx;
				background: #ffffff;
				top: calc(100% + 10rpx);
				left: 1%;
				overflow: auto;

				.eachsuggest {
					font-size: 23rpx;
					display: flex;
					justify-content: space-between;
					padding: 15rpx;
				}
			}

		}

		.backtoorigin {
			width: 70rpx;
			height: 70rpx;
			position: fixed;
			right: 30rpx;
			bottom: 15%;
			border-radius: 50%;
			overflow: hidden;
			background: white;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
